<template>
  <div class="main-date">
    <el-select v-model="id" placeholder="请选择" @change="change"
    style="width:110px;">
      <el-option
        v-for="item in options"
        :key="item.value"
        :label="item.label"
        :value="item.value">
      </el-option>
    </el-select>
    <div class="picker">
      <main-day v-if="id === '4'" v-bind="attr"  @change="changeTime"/>
      <main-hour v-if="id === '3'" v-bind="attr" @change="changeTime"/>
      <main-minutes v-if="id === '2'" v-bind="attr" @change="changeTime"/>
      <main-month v-if="id === '7'" v-bind="attr" @change="changeTime"/>
      <main-original v-if="id === '1'" v-bind="attr" @change="changeTime"/>
      <main-quarter v-if="id === '8'" v-bind="attr" @change="changeTime"/>
      <main-year v-if="id === '9'" v-bind="attr" @change="changeTime"/>
      <!-- <main-week v-if="id === '5'" v-bind="attr" /> -->
    </div>
  </div>
</template>

<script>
import MainDay from './components/day';
import MainHour from './components/hour';
import MainMinutes from './components/minutes';
import MainMonth from './components/month';
import MainOriginal from './components/original';
import MainYear from './components/year';
import MainQuarter from './components/quarter';
export default {
  name: 'MainDate',
  model: {
    event: 'selectChange'
  },
  props: {
    value: {
      type: String,
      default: ''
    },
    options: {
      type: Array,
      default: () => []
    }
  },
  components: {
    MainDay,
    MainHour,
    MainMinutes,
    MainMonth,
    MainOriginal,
    MainYear,
    MainQuarter
  },
  watch: {
    value: {
      handler(n) {
        this.id = n;
        this.attr = this.options.find(v => v.value === n) || {};
      },
      immediate: true
    }
  },
  data() {
    return {
      id: '',
      attr: {}

    };
  },
  methods: {
    change(val) {
      this.$emit('selectChange', val);
    },
    changeTime(item) {
      const { startTime, endTime } = item;
      if (this.$moment(endTime).isAfter(startTime)) {
        this.$emit('change', item);
      } else {
        this.$message.error('开始时间需要在结束时间之前');
      }
    }
  },
  mounted() {

  }
};
</script>

<style lang="scss">
.main-date{
  display: flex;
  .picker{
    div{
      &>div{
        margin-left: 10px;
      }
    }
  }
}
</style>